<template>
  <div class="left-main" :class="{ 'sidebar-visible': isSidebarVisible }">
    <div class="side-left">
      {{ context }}
    </div>
    <div class="tool-right">
      <el-button class="tool-switch" :icon="isSidebarVisible ? ArrowLeft : ArrowRight" @click="onClose" />
      <button class="tool-item" :class="{ 'tool-current': curTool == '平台详情' }">平台详情</button>
      <button class="tool-item" :class="{ 'tool-current': curTool == '平台选项' }">平台选项</button>
      <button class="tool-item" :class="{ 'tool-current': curTool == '平台浏览器' }">平台浏览器</button>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { onMounted, onUnmounted, ref } from 'vue';

import EventBus from '@/common/EventBus';
import { ElMessage } from 'element-plus';

const isSidebarVisible = ref(true);
const curTool = ref('平台浏览器');
const context = ref('no data');

const emits = defineEmits(['sizeMin', 'sizeNormal']);

function onClose() {
  isSidebarVisible.value = !isSidebarVisible.value;
  if (isSidebarVisible.value) {
    emits('sizeNormal');
  } else {
    emits('sizeMin');
  }
}

const onWsMessage = info => {
  try {
    const ret = JSON.parse(info.data);
    if (ret.response == 'rv.get_aer_file_list' && ret.status == 'success') {
      context.value = JSON.stringify(ret.files);
    }
  } catch (_error) {
    ElMessage.error('Message error!');
  }
};

onMounted(() => {
  EventBus.on('wsmessage', onWsMessage);
});

onUnmounted(() => {
  EventBus.off('wsmessage', onWsMessage);
});
</script>

<style>
.left-main {
  position: fixed;
  left: -255px;
  top: 5px;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: row;

  /* 主内容区域的过渡动画 */
  transition: left 0.3s ease;
}

/* 主内容区域显示*/
.sidebar-visible {
  left: 5px;
}

.side-left {
  flex: 1;
  height: 100%;
  width: 250px;
  background-color: rgba(0, 0, 0, 0.3);
}

.tool-right {
  margin-left: 0px;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.tool-item {
  writing-mode: vertical-rl;
  margin-bottom: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent;
}

.tool-current {
  background-color: rgba(0, 0, 0, 0.3);
}

.tool-switch {
  margin-bottom: 5px;
  width: 25px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
